/******************** 变量 ********************/
$date-seprate-line-color: $separate-line-color;
$date-picker-range-bg-color: rgba($color-primary, 0.1);
$date-picker-hover-range-bg-color: rgba($color-primary, 0.1);
$date-picker-deep-hover-range-bg-color: rgba($color-primary, 0.2);
$date-today-border-color: $border-color-hover;
$date-picker-disabled-border-color: transparent;
$date-picker-month-bg-color: transparent;
$date-picker-default-bg-color: transparent;
$date-picker-hover-bg-color: transparent;
$date-picker-large-main: 0.22rem;
$date-picker-large-input-height: 0.4rem;

$text-color-disabled-stroke: $text-color-disabled;
$text-color-disabled-fill: $text-color-disabled;
$text-color-default-stroke: $text-color;
$text-color-active-fill: #ffffff;

$background-color-default-input: transparent;
$background-color-hover-input: transparent;
$background-color-focus-input: transparent;
$background-color-active-input: transparent;
$background-color-default-stroke: $input-background;
$background-color-disabled-input: $disabled-background;
$background-color-default-fill: $primary-color;

$border-color-active-input: $primary-color;
$border-color-focus-input: $primary-color;
$border-color-default-input: $border-color-base;
$border-color-hover-input: $border-color-hover;
$border-color-disabled-input: $border-color-disabled;
$border-color-active-stroke: $primary-color-active;

$color-white: #ffffff;

$date-color-state: (
    default,
    $border-color-default-input,
    $background-color-default-input,
    $datepicker-default-input-color
  ),
  (hover, $border-color-hover-input, $background-color-hover-input, $text-color),
  (focus, $border-color-focus-input, $background-color-focus-input, $text-color),
  (active, $border-color-active-input, $background-color-active-input, $text-color),
  (disabled, $border-color-disabled-input, $background-color-disabled-input, $text-color-disabled) !default;

$date-item-color-state: (default, $background-color-default-stroke, $text-color-default-stroke),
  (hover, $date-state-hover-bg-color, $primary-color), (active, $border-color-active-stroke, $text-color-active-fill),
  (disabled, $background-color-default-stroke, $text-color-disabled-fill) !default;

/******************** mixin ********************/

@mixin itemState($selector, $states) {
  #{ $selector } {
    color: nth(nth($states, 1), 3);
    background: $date-picker-default-bg-color;
    border-radius: $border-radius-m;

    &:hover {
      color: nth(nth($states, 2), 3);
      background: nth(nth($states, 2), 2);
    }

    &.active,
    &.selected {
      color: nth(nth($states, 3), 3);
      background: nth(nth($states, 3), 2);
    }

    &:disabled,
    &[disabled] {
      color: nth(nth($states, 4), 3);
      background: nth(nth($states, 4), 2);
      cursor: not-allowed;
    }
  }
}

/******************** 组件 ********************/
@include colorState('.lv-date-picker-wrapper', $date-color-state);
@include colorState('.lv-date-range-picker-wrapper', $date-color-state);
@include itemState('.lv-date-picker-panel-selection li', $date-item-color-state);
@include itemState('.lv-date-picker-calendar-body li .lv-date-picker-cell', $date-item-color-state);
@include itemState('.lv-date-picker-month-list li .lv-date-picker-month-cell', $date-item-color-state);
@include itemState('.lv-date-picker-year-list li .lv-date-picker-year-cell', $date-item-color-state);
@include itemState('.lv-date-picker-10year-list li .lv-date-picker-10year-cell', $date-item-color-state);

.lv-date-picker {
  display: inline-block;
  width: 100%;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-base;

  @include input-help-tooltip($margin-xl);

  &.lv-date-picker-inline {
    .lv-date-picker-panel-host {
      border-radius: 0;
      box-shadow: none;
    }
  }
  // 大尺寸输入框
  &.lv-date-picker-size-large {
    .lv-date-picker-wrapper {
      height: $height-lg;

      .lv-date-picker-clear {
        height: $height-base;
      }

      .lv-input {
        height: $date-picker-large-input-height;
      }
    }
  }
}

.lv-date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: $height-base;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;

  @include motion-state;

  @include motion-state;

  .lv-date-picker-clear {
    position: absolute;
    top: 0.03rem;
    right: 0.03rem;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    width: 0.24rem;
    height: $height-sm;
    background: $component-background;
  }

  .lv-date-picker-main {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;

    .lv-input {
      width: 100%;
      height: 0.3rem;
      padding: 0 $padding-xs 0 $padding-sm;
      background: none;
      border: none;

      &[readonly] {
        cursor: default;
      }

      &[disabled] {
        cursor: not-allowed;
      }
    }
  }

  .lv-date-picker-operation {
    position: relative;
    display: flex;
    justify-content: center;
    width: 0.32rem;
  }

  &:hover {
    .lv-date-picker-clear {
      display: flex;
    }
  }

  &.disabled {
    color: nth(nth($select-color-state, 5), 4);
    background: nth(nth($select-color-state, 5), 3);
    border-color: $date-picker-disabled-border-color;
    cursor: not-allowed;

    .lv-date-picker-operation {
      cursor: not-allowed;
    }
  }

  &.active {
    border-color: $border-color-active-input;
  }
}

// panel
.lv-date-picker-panel-host {
  display: flex;
  width: 100%;
  background: $component-background;
  border-radius: $border-radius-md;
  box-shadow: $shadow-sm;
  margin: $margin-xs 0;
}

.lv-date-picker-panel-container {
  width: auto;

  > .lv-date-picker-panel-body {
    display: flex;
  }

  > .lv-date-picker-panel-footer {
    border-top: $border-width-base $border-style-base $date-seprate-line-color;

    > .lv-date-picker-panel-footer-extra {
      width: auto;
    }

    > .lv-date-picker-panel-footer-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: $height-xl;
      padding: 0 $padding-lg;

      &.lv-date-picker-panel-footer-align-R {
        justify-content: flex-end;
      }
    }
  }
}

.lv-date-picker-panel-presets {
  display: flex;
  flex-direction: column;
  grid-gap: 0.12rem;
  gap: 0.12rem;
  align-items: flex-start;
  width: 1.42rem;
  padding: 0.22rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: $border-width-base $border-style-base $border-color-base;

  @include component-scroll;

  .lv-date-picker-panel-presets-item.lv-button {
    width: 100%;
    color: $text-color;
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;

    &:not([disabled]):hover {
      color: $primary-color;
    }
  }
}

.lv-date-picker-calendar {
  position: relative;
  width: 100%;

  > .lv-date-picker-calendar-container {
    display: flex;

    > .calendar-panel {
      position: relative;
    }

    > .timer-panel {
      display: flex;
      flex-direction: column;
      border-left: $border-width-base $border-style-base $date-seprate-line-color;

      .lv-time-picker-panel-container {
        border: none;
        box-shadow: none;
        border-radius: unset;
      }

      .lv-time-picker-panel {
        margin: unset;
      }

      .lv-time-picker-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0.56rem;
        border-bottom: $border-width-base $border-style-base $date-seprate-line-color;
      }

      .lv-time-picker-panel-combobox {
        height: 2.4rem;
      }

      .lv-time-picker-panel-selection {
        max-height: 100%;

        &::after {
          height: calc(100% - 0.25rem);
        }
      }

      .display-time {
        width: 100%;
        font-weight: bold;
        text-align: center;
      }
    }
  }

  .lv-date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.56rem;
    width: 3rem;
    padding: 0 $padding-xl;
    border-bottom: $border-width-base $border-style-base $date-seprate-line-color;

    > .left i {
      margin-right: $margin-sm;
    }

    > .center span {
      display: inline-flex;
      cursor: pointer;

      &:hover {
        color: $text-color-link;
      }

      &:first-of-type {
        margin-right: $margin-sm;
      }

      &.readonly {
        cursor: default;
        pointer-events: none;

        &:hover {
          color: inherit;
        }
      }
    }

    > .right i {
      margin-left: $margin-sm;
    }

    .lv-date-picker-header-icon-hidden {
      cursor: inherit;
      opacity: 0;
      pointer-events: none;
    }
  }

  .lv-date-picker-body {
    position: relative;
    flex: 1 1 auto;
    height: 2.4rem;
    padding: 0.08rem 0.24rem;
  }

  > .lv-date-picker-footer {
    border-top: $border-width-base $border-style-base $date-seprate-line-color;

    > .lv-date-picker-footer-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: $height-xl;
      padding: 0 $padding-lg;

      :last-of-type {
        margin-left: auto;
      }

      > .align-center {
        margin: 0 auto;
      }
    }
  }

  &.lv-date-picker-simple {
    > .lv-date-picker-calendar-container {
      height: auto;
    }

    .lv-date-picker-header {
      border-bottom: none;

      .left,
      .center,
      .right {
        white-space: nowrap;
      }

      > .center span {
        &:first-of-type {
          margin-right: 0;
        }
      }
    }
  }
}

// lv-date-picker-body
.lv-date-picker-calendar-header {
  margin-bottom: $margin-sm;

  > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;

    > li {
      flex: 1 1 auto;
      width: 0.32rem;
      height: $height-sm;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
        color: $text-color-secondary;
      }
    }
  }
}

.lv-date-picker-calendar-body {
  > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-top: $margin-sm;

    > li {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lv-date-picker-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.32rem;
        height: $height-sm;
        cursor: pointer;
      }

      .lv-date-picker-cell-hide {
        display: flex;
        width: 0.32rem;
        height: $height-sm;
      }

      &.lv-date-picker-today .lv-date-picker-cell {
        border: $border-width-base $border-style-base $date-today-border-color;
      }

      &.lv-date-picker-last-month-day .lv-date-picker-cell,
      &.lv-date-picker-next-month-day .lv-date-picker-cell {
        color: $text-color-disabled-stroke;
      }

      &.lv-date-picker-selected-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          .lv-date-picker-cell {
            z-index: 2;
            color: $color-white;
            background-color: $background-color-default-fill;

            &:hover {
              color: $color-white;
            }
          }
        }
      }

      &.lv-date-picker-disabled-day {
        background-color: $date-picker-disabled-bg-color;

        .lv-date-picker-cell {
          color: $text-color-disabled;
          cursor: not-allowed;

          &:hover {
            color: $text-color-disabled;
          }
        }

        &.lv-date-picker-selected-day {
          &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
            .lv-date-picker-cell {
              color: $date-picker-disable-color;
              background-color: $date-picker-disable-background;
              border: $date-picker-disable-border;

              &:hover {
                color: $date-picker-disable-color;
                background-color: $date-picker-disable-background;
              }
            }
          }
        }

        &.lv-date-picker-range-day {
          &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
            color: $date-picker-disable-color;
            background-color: $date-picker-disable-range-background;

            &.lv-date-picker-hover-range-day {
              color: $date-picker-disable-color;
              background-color: $date-picker-disable-range-background;
            }
          }
        }
        &.lv-date-picker-range-start-day,
        &.lv-date-picker-range-end-day {
          &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
            &:not(.lv-date-picker-hover-range-day):not(.lv-date-picker-range-end-day)::after {
              background-color: $date-picker-disable-range-point-background;
            }
            &:not(.lv-date-picker-hover-range-day):not(.lv-date-picker-range-start-day)::after {
              background-color: $date-picker-disable-range-point-background;
            }
          }
        }
        &.lv-date-picker-hover-range-day:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          background-color: $date-picker-disabled-bg-color;
        }
      }

      &.lv-date-picker-disabled-start-cell {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
      }

      &.lv-date-picker-disabled-end-cell {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
      }

      &.lv-date-picker-range-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          background-color: $date-picker-range-bg-color;

          &.lv-date-picker-hover-range-day {
            background-color: $date-picker-deep-hover-range-bg-color;
          }
        }
      }

      &.lv-date-picker-range-start-day {
        &:not(.lv-date-picker-hover-range-day):not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          position: relative;

          &:not(.lv-date-picker-range-end-day)::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 50%;
            background-color: $date-picker-range-bg-color;
            content: '';
          }
        }
      }

      &.lv-date-picker-range-end-day {
        &:not(.lv-date-picker-hover-range-day):not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          position: relative;

          &:not(.lv-date-picker-range-start-day)::after {
            position: absolute;
            top: 0;
            right: 50%;
            bottom: 0;
            left: 0;
            background-color: $date-picker-range-bg-color;
            content: '';
          }
        }
      }

      &.lv-date-picker-hover-range-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          background-color: $date-picker-hover-range-bg-color;
        }
      }

      &.lv-date-picker-hover-range-start-day,
      &.lv-date-picker-hover-range-end-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day):not(.lv-date-picker-disabled-day) {
          position: relative;

          &:not(.lv-date-picker-selected-day) .lv-date-picker-cell {
            z-index: 2;
            color: $text-color;
            background-color: $date-picker-hover-range-bg-color;
            border: 0.01rem solid $color-primary;
          }

          &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            content: '';
          }
        }
      }

      &.lv-date-picker-hover-range-start-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          &::before {
            right: 0;
            left: 50%;
          }
        }
      }

      &.lv-date-picker-hover-range-end-day {
        &:not(.lv-date-picker-last-month-day):not(.lv-date-picker-next-month-day) {
          &::before {
            right: 50%;
            left: 0;
          }
        }
      }
    }
  }
}

// 月份选择面板
.lv-date-picker-month {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;

  > .lv-date-picker-header {
    flex: 0 0 auto;
  }

  > .lv-date-picker-body {
    flex: 1 1 auto;
  }
}

.lv-date-picker-month-list {
  height: 100%;

  > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    padding-bottom: $padding-sm;

    > li {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      width: 33.333333%;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lv-date-picker-month-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.64rem;
        height: 0.48rem;
        line-height: 1;
        cursor: pointer;
      }

      &.lv-date-picker-month-disabled-cell {
        background-color: $date-picker-disabled-bg-color;
        .lv-date-picker-month-cell {
          color: $text-color-disabled;
          cursor: not-allowed;

          &:hover {
            color: $text-color-disabled;
          }
        }
      }

      &.lv-date-picker-month-disabled-start-cell {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
      }

      &.lv-date-picker-month-disabled-end-cell {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
      }

      &.lv-date-picker-month-selected-cell .lv-date-picker-month-cell {
        color: $color-white;
        background-color: $background-color-default-fill;

        &:hover {
          color: $color-white;
        }
      }
    }
  }

  &.lv-date-picker-month-list-independent {
    > ul {
      > li {
        &.lv-date-picker-month-disabled-cell.lv-date-picker-month-selected-cell .lv-date-picker-month-cell {
          color: $date-picker-disable-color;
          background-color: $date-picker-disable-background;
          border: $date-picker-disable-border;

          &:hover {
            color: $date-picker-disable-color;
            background-color: $date-picker-disable-background;
          }
        }
      }
    }
  }
}

// 年份选择面板
.lv-date-picker-year {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;

  > .lv-date-picker-header {
    flex: 0 0 auto;

    > .center span {
      &:first-of-type {
        margin-right: 0;
      }
    }
  }

  > .lv-date-picker-body {
    flex: 1 1 auto;
  }
}

.lv-date-picker-year-list {
  height: 100%;

  > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    padding-bottom: $padding-sm;

    > li {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      width: 33.333333%;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lv-date-picker-year-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.64rem;
        height: 0.48rem;
        line-height: 1;
        cursor: pointer;
      }

      .lv-date-picker-year-cell-hide {
        display: flex;
        width: 0.64rem;
        height: 0.48rem;
        line-height: 1;
      }

      &.lv-date-picker-year-last-year .lv-date-picker-year-cell,
      &.lv-date-picker-year-next-year .lv-date-picker-year-cell {
        color: $text-color-disabled-stroke;

        &:hover {
          color: $border-color-active-stroke;
        }
      }

      &.lv-date-picker-year-disabled-cell {
        background-color: $date-picker-disabled-bg-color;
        .lv-date-picker-year-cell {
          color: $text-color-disabled;
          cursor: not-allowed;

          &:hover {
            color: $text-color-disabled;
          }
        }
      }

      &.lv-date-picker-year-disabled-start-cell {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
      }

      &.lv-date-picker-year-disabled-end-cell {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
      }

      &.lv-date-picker-year-selected-cell .lv-date-picker-year-cell {
        color: $color-white;
        background-color: $background-color-default-fill;

        &:hover {
          color: $color-white;
        }
      }
    }
  }

  &.lv-date-picker-year-list-independent {
    > ul {
      > li {
        &.lv-date-picker-year-disabled-cell.lv-date-picker-year-selected-cell .lv-date-picker-year-cell {
          color: $date-picker-disable-color;
          background-color: $date-picker-disable-background;
          border: $date-picker-disable-border;

          &:hover {
            color: $date-picker-disable-color;
            background-color: $date-picker-disable-background;
          }
        }
      }
    }
  }
}

// 10年选择面板
.lv-date-picker-10year {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;

  > .lv-date-picker-header {
    flex: 0 0 auto;

    > .center span {
      cursor: default;

      &:hover {
        color: inherit;
      }

      &:first-of-type {
        margin-right: 0;
      }
    }
  }

  > .lv-date-picker-body {
    flex: 1 1 auto;
  }
}

.lv-date-picker-10year-list {
  height: 100%;

  > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    padding-bottom: $padding-sm;

    > li {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      width: 33.333333%;

      > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .lv-date-picker-10year-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.8rem;
        height: 0.48rem;
        line-height: 1;
        cursor: pointer;
      }

      .lv-date-picker-10year-cell-hide {
        display: flex;
        width: 0.8rem;
        height: 0.48rem;
        line-height: 1;
      }

      &.lv-date-picker-10year-last-year .lv-date-picker-10year-cell,
      &.lv-date-picker-10year-next-year .lv-date-picker-10year-cell {
        color: $text-color-disabled-stroke;

        &:hover {
          color: $border-color-active-stroke;
        }
      }

      &.lv-date-picker-10year-disabled-cell {
        background-color: $date-picker-disabled-bg-color;
        .lv-date-picker-10year-cell {
          color: $text-color-disabled;
          cursor: not-allowed;

          &:hover {
            color: $text-color-disabled;
          }
        }
      }

      &.lv-date-picker-10year-disabled-start-cell {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
      }

      &.lv-date-picker-10year-disabled-end-cell {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
      }

      &.lv-date-picker-10year-selected-cell .lv-date-picker-10year-cell {
        color: $color-white;
        background-color: $background-color-default-fill;

        &:hover {
          color: $color-white;
        }
      }
    }
  }
}

// 日期范围选择
.lv-date-range-picker {
  display: inline-block;
  width: 100%;

  @include input-help-tooltip($margin-xl);

  &.lv-date-range-picker-inline {
    .lv-date-range-picker-wrapper {
      width: auto;
      margin: $margin-md;

      &:hover {
        border-color: $primary-color;
      }
    }

    .lv-date-picker-panel-host {
      border-radius: 0;
      box-shadow: none;
      margin: 0;
      border-top: $border-width-base $border-style-base $date-seprate-line-color;
      .lv-date-picker-header {
        height: 0.35rem;
      }
      .lv-time-picker-panel {
        margin: 0;
      }
    }
  }

  // 大尺寸输入框
  &.lv-date-range-picker-size-large {
    .lv-date-range-picker-wrapper {
      height: $height-lg;

      .lv-date-picker-clear {
        height: $height-base;
      }

      .lv-date-picker-main {
        &.lv-date-picker-selected-start,
        &.lv-date-picker-selected-end {
          &::after {
            top: calc(50% - 0.11rem);
            height: 0.22rem;
          }
        }

        .lv-input {
          height: $date-picker-large-input-height;
        }
      }
    }
  }
}

.lv-date-range-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: $height-base;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;

  @include motion-state;

  @include motion-state;

  .lv-date-picker-clear {
    position: absolute;
    top: 0.03rem;
    right: 0.03rem;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    width: 0.24rem;
    height: $height-sm;
    background: $component-background;
  }

  .lv-date-picker-main {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;

    &.lv-date-picker-selected-start,
    &.lv-date-picker-selected-end {
      position: relative;

      @include input-help-tooltip(0);

      &::after {
        position: absolute;
        top: calc(50% - 0.18rem / 2);
        left: 0.04rem;
        width: calc(50% - 0.16rem / 2 - 0.04rem * 2);
        height: 0.18rem;
        background: rgba($primary-color, 0.1);
        border-radius: $border-radius-xs;
        content: '';
      }

      > .lv-input {
        z-index: 1;
      }
    }

    &.lv-date-picker-selected-end {
      &::after {
        right: 0.05rem;
        left: auto;
      }
    }

    .lv-input {
      width: 100%;
      height: 0.3rem;
      padding: 0 $padding-xs 0 $padding-sm;
      text-align: left;
      background: none;
      border: none;

      &::-ms-input-placeholder {
        text-align: left;
      }

      &::-webkit-input-placeholder {
        text-align: left;
      }

      &[readonly] {
        cursor: default;
      }

      &[disabled] {
        cursor: not-allowed;
      }
    }

    > span {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 0.16rem;
    }
  }

  .lv-date-picker-operation {
    position: relative;
    display: flex;
    justify-content: center;
    width: 0.32rem;
  }

  &:hover {
    .lv-date-picker-clear {
      display: flex;
    }
  }

  &.disabled {
    color: nth(nth($select-color-state, 5), 4);
    background: nth(nth($select-color-state, 5), 3);
    border-color: $date-picker-disabled-border-color;
    cursor: not-allowed;

    .lv-date-picker-operation {
      cursor: not-allowed;
    }
  }

  &.active {
    border-color: $primary-color;
  }
}

// form 校验处理
.lv-date-picker.ng-invalid.ng-dirty {
  .lv-date-picker-wrapper {
    border-color: $error-color;
  }
}

.lv-date-range-picker.ng-invalid.ng-dirty {
  .lv-date-range-picker-wrapper {
    border-color: $error-color;
  }
}

.lv-date-z-index {
  z-index: $zindex-date;
}
